<template>
  <div class="maskCenter">
    <div
      id="box"
      class="systemDialog checkDialog"
      :class="visible ? 'open-content' : 'open-content-hide'"
      style="
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 667px;
        width: 650px;
      "
    >
      <div class="dialog-header" v-movew>
        <span>组件选择</span>
      </div>
      <div class="dialog-body">
        <el-tabs v-model="activeName">
          <el-tab-pane label="系统组件" name="first" v-if="!isShowIcon">
            <div class="syscoms">
              <el-checkbox-group
                v-model="checkedComs"
                @change="handleWindowCheck($event, 0)"
                style="text-align: left"
              >
                <el-checkbox
                  class="systemCheckbox"
                  v-for="(item,syscomsIndex) in syscoms"
                  :label="item.dblcomId"
                  :key="syscomsIndex"
                  >{{ item.dblcomText }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自定义界面" name="second" v-if="!isShowIcon">
            <el-col :span="24" style="margin-bottom: 16px">
              <el-input
                placeholder="请输入名称"
                class="systemInput"
                v-model="comName"
                @keyup.enter.native="search"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
              </el-input>
            </el-col>
            <div class="usercoms">
              <el-checkbox-group
                v-model="checkedComs"
                @change="handleWindowCheck($event, 1)"
                style="text-align: left"
              >
                <el-checkbox
                  class="systemCheckbox"
                  v-for="(item,comsIndex) in coms"
                  :label="item.dblcomId"
                  :key="comsIndex"
                  >{{ item.dblcomText }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </el-tab-pane>

          <el-tab-pane label="自定义表单" name="third" v-if="!isShowIcon">
            <el-col :span="24" style="margin-bottom: 16px">
              <el-input
                placeholder="请输入名称"
                class="systemInput"
                v-model="cName"
                @keyup.enter.native="search"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
              </el-input>
            </el-col>
            <div class="usercoms">
              <el-checkbox-group
                v-model="checkedComs"
                @change="handleWindowCheck($event, 2)"
                style="text-align: left"
              >
                <el-checkbox
                  class="systemCheckbox"
                  v-for="(item,cellComsIndex) in cellComs"
                  :label="item.dblcomId"
                  :key="cellComsIndex"
                  >{{ item.dblcomText }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自定义链接" name="four" v-if="!isShowIcon">
            <el-col :span="24" style="margin-bottom: 16px">
              <el-input
                placeholder="请输入超链接"
                class="systemInput"
                v-model="customLink"
                @input="customInputChange"
              >
              </el-input>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="自定义组件" name="six">
            <el-col :span="24" style="margin-bottom: 16px">
              <el-input
                placeholder="请输入组件名称"
                class="systemInput"
                v-model="cName"
                @keyup.enter.native="search"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
                </el-input>
            </el-col>
            <div class="usercoms">
              <el-checkbox-group
                v-model="checkedComs"
                @change="handleWindowCheck($event, 4)"
                style="text-align: left"
              >
                <el-checkbox
                  class="systemCheckbox"
                  v-for="(component,componentsIndex) in components"
                  :label="component.dblcomId"
                  :key="componentsIndex"
                  >{{ component.dblcomText }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <el-tab-pane label="文字图片" name="five" v-if="isShowIcon">
            <el-col :span="24" style="margin-bottom: 16px">
              <el-input
                placeholder="请输入图标"
                class="systemInput"
                v-model="cName"
              >
              </el-input>
            </el-col>
            <div class="usercoms">
              <el-checkbox-group
                v-model="checkedComs"
                @change="handleWindowCheck($event, 3)"
                style="text-align: left"
              >
                <el-checkbox
                  class="systemCheckbox"
                  v-for="(iconItem,iconfontDataIndex) in iconfontData"
                  :label="iconItem.icon_id"
                  :key="iconfontDataIndex"
                  >
                  <label class="iconfont" :class="`icon${ iconItem.font_class }`" style="fontSize:22px;"></label>
                  <!-- {{ iconItem.name }} -->
                  </el-checkbox
                >
              </el-checkbox-group>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-show="activeNameCom">
          <el-row>
            <el-col :span="3"> 组件ID: </el-col>
            <el-col :span="4" style="padding: 0">
              <el-input
                placeholder="组件ID"
                class="systemInput"
                v-model="info.dblcomId"
              >
              </el-input>
            </el-col>
            <el-col :span="4" style="text-align: center"> 组件名字: </el-col>
            <el-col :span="8">
              <el-input
                placeholder="组件名字"
                class="systemInput"
                v-model="info.dblvue"
              >
              </el-input>
            </el-col>
            <el-col :span="5" style="text-align: right">
              <el-checkbox
                style="
                  background: none;
                  width: auto;
                  margin: 0;
                  height: 32px;
                  padding-left: 0;
                "
                class="systemCheckbox"
                v-model="info.onlyOne"
                >子表单记录</el-checkbox
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3"> 参数格式: </el-col>
            <el-col :span="21">
              <el-input
                placeholder="参数格式"
                class="systemInput"
                v-model="info.dblParamIn"
              >
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3"> 返回格式: </el-col>
            <el-col :span="21">
              <el-input
                placeholder="返回格式"
                class="systemInput"
                v-model="info.dblParamOut"
              >
              </el-input>
            </el-col>
          </el-row>
          <!--<el-row>
						<el-col :span="3" >
							sql:
						</el-col>
						<el-col :span="21">
							<el-input placeholder="sql" class="systemInput" v-model="info.sql">
							</el-input>
						</el-col>
					</el-row>-->
        </div>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="okclick">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import { pageQuery } from "@/system/api/customPage";
import { repClassquery, getRep } from "@/system/api/cellEdit";
import { comconfig } from "../config/cellConfigs";
import { deepCopy } from "@/utils/public";
//TODO  引入iconfont字体图标JSON文件
import iconfontData from "@/assets/icons/iconfont.json";
//TODO 引入自定义界面的JS文件
import {components} from "@/system/api/components.js"
export default {
  directives: { movew },
  name: "winComSelect",
  props: {
    title: { default: "组件选择" },
    pcomevents: {
      default: null,
    },
    columnValue: null,
  },
  data() {
    return {
      visible: true,
      tobj: {
        doubleEvent: null,
        dblParamIn: null,
        dblParamOut: null,
        dblvue: null,
        dblcomId: null,
        dblcomText: null,
        onlyOne: false,
        type: null,
        sql: null,
      },
      info: {
        doubleEvent: null,
        dblParamIn: null,
        dblParamOut: null,
        dblvue: null,
        dblcomId: null,
        dblcomText: null,
        onlyOne: false,
        type: null,
        sql: null,
      },
      checkedComs: [],
      comName: null,
      cName: null,
      coms: [],
      cellComs: [],
      syscoms: [],
      activeName: "first",
      isShowIcon: false,
      iconfontData: [],//图标数据
      customLink:"",//自定义链接数据
      components:components,
      componentComs:[]
    };
  },
  computed: {
    activeNameCom() {
      //TODO  控制下方组件详情是否显示
      if (
        this.activeName != "first" &&
        this.activeName != "second" &&
        this.activeName != "third" &&
        this.activeName != "six"
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  mounted() {
    // console.log("components:::"+JSON.stringify(components))
    this.search(); //初始化com
    if (this.pcomevents) {
      this.info = this.pcomevents;
    }
    //TODO 是否显示图标选择
    if (this.columnValue == "3") {
      this.isShowIcon = true;
      this.activeName="five";
    }
    console.log(this.isShowIcon);
    comconfig.comevents
      .find((a) => a.attrkey == "doubleEvent")
      .optionitem.forEach((item) => {
        //加系统下拉框
        let obj = deepCopy(this.tobj);
        console.log("item:"+JSON.stringify(item));
        console.log("obj:"+JSON.stringify(obj))
        obj.doubleEvent = item.value;
        obj.dblcomId = item.id;
        obj.dblcomText = item.label;
        obj.dblvue=item.linkComponents;
        //this.info.dblvue=item.linkComponents;
        if (item.id == -1) {
          obj.dblParamIn = '{"userFlag":"true","parentId":"0"}';
        }

        if (item.id == -2) {
          obj.dblParamIn = '{"userFlag":"false","parentId":"0"}';
        }

        if (item.id == -9) {
          obj.dblParamIn =
            '{"dialogTitle":"标题","multipleChoice":1,"params":{"tableName":"T_DEPT","idName":"ID","parentIdName":"PARENT_ID","parentId":0,"ordName":"ORD"}}';
        }
        obj.type = 0;
        this.syscoms.push(obj);
      });

    if (this.pcomevents) {
      //如果传入事件 不为null   给info 赋值
      for (let key in this.info) {
        this.info[key] = this.pcomevents[key];
      }
    }

    this.checkedComs = [];
    this.checkedComs.push(this.info.dblcomId);

    //打印JSON文件
    this.iconfontData = iconfontData.glyphs;
    //自定义组件参数格式、返回格式等参数定义
    // this.componentComs
    components.forEach(item => {
      let obj=deepCopy(this.tobj);
        obj.doubleEvent = item.doubleEvent;
        obj.dblcomId = item.dblcomId;
        obj.dblcomText = item.dblcomText;
        obj.dblvue=item.dblvue;
        obj.dblParamIn =
        // {"dialogTitle":"标题","multipleChoice":1,"params":{"tableName":"T_DEPT","idName":"ID","parentIdName":"PARENT_ID","parentId":0,"ordName":"ORD"}}
          '{"title":"'+item.dblcomText+'","multipleChoice":1,"params":{"tableName":"T_DEPT","idName":"ID"}}';
        obj.type = 4;
        this.componentComs.push(obj)
    });
  },
  methods: {
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    okclick() {
      console.log("info:::::"+JSON.stringify(this.info))
      this.visible = false;
      if(this.activeName=='four'){
        //自定义超链接
        this.$set(this.info,"dblcomText",this.customLink);
        this.$set(this.info,"type",3);
      }
      setTimeout(() => {
        this.$emit("ok", this.info);
      }, 400);
    },
    // 窗体勾选
    handleWindowCheck(e, type) {
      console.log("这是e", e);
      if (e.length > 1) {
        e.splice(0, 1);
      }

      if (e.length == 0) {
        this.info = deepCopy(this.tobj);
      } else {
        this.getinfo(e[0], type);
      }
    },
    search() {
      this.pageQuery();
      this.repClassquery();
    },
    getRep(obj) {
      //点击向后台查询table  和  主键
      getRep({ classId: obj.dblcomId }).then((res) => {
        //info.table[0].tableName  info.table[0].pkey
        // console.log(obj)
        obj.dblParamIn = obj.dblParamIn.replace(
          "[tableName]",
          res.info.table[0].tableName
        );
        obj.dblParamIn = obj.dblParamIn.replace(
          "[keyName]",
          res.info.table[0].pkey
        );
      });
    },
    repClassquery() {
      repClassquery({ name: this.cName }).then((res) => {
        if (res.success) {
          console.log(res)
          this.cellComs = [];
          res.info.forEach((item) => {
            let obj = deepCopy(this.tobj);
            obj.dblvue = "cellView.vue";
            obj.dblcomId = item.id;
            obj.dblcomText = item.name; //wpId  tworkId  tdeptId nodeId
            obj.dblParamIn =
              '{"classId":"' +
              item.id +
              // "tdeptId":"[deptId]"+
              '","workId":"","tableName":"[tableName]","keyName":"[keyName]","repClassId":"'+item.id+'","nodeId":"1","businessInfo":"null"}';
            obj.type = 2;
            this.cellComs.push(obj);
          });
          this.setCombyinfo(this.info.dblcomId, this.info.type); //设置com信息
          // console.log("cellComs::::",JSON.stringify(this.cellComs))
        }
      });
    },
    pageQuery() {
      pageQuery({
        customPage: {
          type: 1,
          text: this.comName,
        },
        pageIndex: 0,
        pageSize: 0,
      }).then((res) => {
        this.coms = [];
        res.info.forEach((item) => {
          let obj = deepCopy(this.tobj);
          obj.dblvue = "templateWindow.vue";
          obj.dblcomId = item.id;
          obj.dblcomText = item.text;
          obj.dblParamIn =
            '{"id":"' +
            item.id +
            '","multipleChoice":"1","menuCode":"' +
            item.code +
            '"}';
          obj.type = 1;
          this.coms.push(obj);
        });
        this.setCombyinfo(this.info.dblcomId, this.info.type); //设置com信息
      });
    },
    getinfo(id, type) {
      console.log(id,type)
      if (type == 0) {
        for (let i = 0; i < this.syscoms.length; i++) {
          let com = this.syscoms[i];
          if (id == com.dblcomId) {
            this.info = com;
            break;
          }
        }
      }
      if (type == 1) {
        for (let i = 0; i < this.coms.length; i++) {
          let com = this.coms[i];
          if (id == com.dblcomId) {
            this.info = com;
            break;
          }
        }
      }

      if (type == 2) {
        for (let i = 0; i < this.cellComs.length; i++) {
          let com = this.cellComs[i];
          if (id == com.dblcomId) {
            this.info = com;
            this.getRep(com);
            break;
          }
        }
      }
      if(type==3){
        //图标选择，根据ID进行查询给information赋值
        this.info=this.iconfontData.filter(item=>{
          return item.icon_id==id;
        })[0];

      }
      //自定义组件
      if(type==4){
        this.info=this.componentComs.filter(item=>{
          return item.dblcomId==id;
        })[0];
      }
    },
    setCombyinfo(id, type) {
      if (type == 0) {
        for (let i = 0; i < this.syscoms.length; i++) {
          let com = this.syscoms[i];
          if (id == com.dblcomId) {
            this.syscoms[i] = this.info;
            break;
          }
        }
      }

      if (type == 1) {
        for (let i = 0; i < this.coms.length; i++) {
          let com = this.coms[i];
          if (id == com.dblcomId) {
            this.coms[i] = this.info;
            break;
          }
        }
      }

      if (type == 2) {
        for (let i = 0; i < this.cellComs.length; i++) {
          let com = this.cellComs[i];
          if (id == com.dblcomId) {
            this.cellComs[i] = this.info;
            break;
          }
        }
      }
    },
    customInputChange(){
      //自定义超链接输入框改变事件
      this.info={};
      this.checkedComs=[];  
    }
  },
};
</script>

<style scoped>
.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}
.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
  text-align: left;
}
.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.body {
  flex-direction: row;
  width: 100%;
  padding: 12px 17px;
  height: calc(100% - 127px);
  color: var(--system-page-topbar-text-color);
}

/*表单背景宽高设置*/
.open-content {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscale 0.4s;
}

/*表单打开动画*/
@keyframes myscale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*表单关闭样式及动画*/
.open-content-hide {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}

@keyframes myscalehide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*element 输入框样式*/
>>> .el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
/*element 下拉框*/
>>> .el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}
/*下拉框箭头*/
>>> .el-select__caret {
  line-height: 32px;
}
>>> .el-select {
  width: 227px;
}
/*element 输入框的 focus hover样式*/
>>> .el-input__inner:focus,
>>> .el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>> .el-input__inner:hover,
>>> .el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}
>>> .el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
>>> .el-checkbox {
  margin-right: 10px;
  margin-bottom: 12px;
  text-align: left;
  width: 186px;
  height: 36px;
  line-height: 36px;
  background: var(--menuManage-checkbox-bgc);
  opacity: 0.9;
  border-radius: 6px;
  padding-left: 14px;
  color: var(--system-checkbox-text-color);
}
.usercoms {
  height: 300px;
  overflow: auto;
  width: 100%;
  padding: 10px;
  padding-right: 0px;
  border: 1px solid var(--system-button-border-color);
  border-radius: 4px;
}
.syscoms {
  height: 348px;
  overflow: auto;
  width: 100%;
  padding: 10px;
  padding-right: 0px;
  border: 1px solid var(--system-button-border-color);
  border-radius: 4px;
}
.el-col-3 {
  text-align: left;
  color: var(--page-lable-text-color);
  line-height: 32px;
}
.el-col-4,
.el-col-5 {
  color: var(--page-lable-text-color);
  line-height: 32px;
}
.el-row {
  margin-top: 16px;
}
/*让搜索框图标靠右*/
.systemInput >>> .el-input-group__append {
  right: 18px;
}
</style>
